<template>
  <div class="page">
    <c-title text="活码创建"></c-title>
    <div class="wrapper">

      <div class="item">
        <span class="name">活码名称</span>
        <input class="input"
               v-model="form.code_name"
               type="text"
               placeholder="输入活码名称">
      </div>

      <div class="item">
        <span class="name">引导语</span>
        <input class="input"
               v-model="form.code_guide"
               type="text"
               placeholder="输入引导语">
      </div>

      <div class="item service">
        <span class="name">客服二维码</span>
        <div @click="selectIndex(1)" class="imgflex">
          <van-uploader :after-read="onRead" multiple>
              <div class="photoshow">
                <img :src="temp_customer_service" v-if="temp_customer_service" />
                <div class="crucifix" v-else></div>
              </div>
            </van-uploader>
        </div>

      </div>

      <div class="item">
        <span class="name">客服引导语</span>
        <div class="flex-j-sb flex-a-c service-flex">
          <input class="input"
               v-model="form.customer_service_guide"
               type="text"
               placeholder="输入客服引导语">
          <span class="iconfont icon-icon_more1"></span>
        </div>

      </div>

      <div class="item"
           v-if="auth_recommend">
        <span class="name">推荐</span>
        <div class="desc flex">
          <van-switch size="20px"
            :active-color="'var(--themeBaseColor)' == '' ?'#00b075':'var(--themeBaseColor)'"
            v-model="form.recommend" />
        </div>

      </div>

      <div class="item"
           :style="{height:form.explain?'7.688rem':''}">
        <div class="flex item-desc">
          <span class="name">说明</span>
          <div  class="desc flex">
              <van-switch size="20px"
              v-model="form.explain"
              :active-color="'var(--themeBaseColor)' == '' ?'#00b075':'var(--themeBaseColor)'" />
          </div>
        </div>
        <textarea placeholder="输入活动说明"
        v-if="form.explain"
        class="textarea"
        v-model="form.explain_content"></textarea>
      </div>


      <div class="images">
        <div @click="selectIndex(2)" class="imgflex">
          <van-uploader :after-read="onRead" multiple>
              <div class="photoshow">
                <img :src="imageUrl" v-if="imageUrl" />
                <div class="crucifix" v-else></div>
              </div>
            </van-uploader>
          <span class="images-tips">添加群二维码</span>
        </div>

        <div class="imgItem"
             v-for="(item,key) in qrCodeArr"
             :key="key">
          <div class="qrcode">
            <img :src="item.temp_img"
                 alt="">
            <i @click="delRQCode(key)"
               class="iconfont icon-guanbi delImg"></i>
            <div class="overdue"
                 v-if="false">已过期</div>
          </div>
          <div class="entry">
            <input type="text"
                   v-model="item.num"
                   placeholder="扫码上限">
            <span>人</span>
          </div>
        </div>

      </div>

      <!-- 占位，底部按钮 -->
      <div style="height: 3.063rem; width: 100%;"></div>

    </div>

    <div class="btn"
         @click="send">
      保存
    </div>
    <div class="mb-22"></div>
  </div>
</template>

<script>
import groupCodeCreateController from './group_code_create_controller.js';

export default groupCodeCreateController;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .mb-22 {
      height: 1.375rem;
      clear: both;
    }
    .page {
      // background: #fff;
      min-height: 100vh;
    }

    .wrapper {
      background: #FFFFFF;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      margin:0.75rem 0.75rem 6.75rem 0.75rem;
      padding:0 0.75rem;
      // padding-left: 12.496px;
      .item {
        width:100%;
        box-sizing: border-box;
        padding:1.0625rem 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        &::after {
          content:'';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 0.0625rem;
          background-color: #f0f0f0;
          /* 如果不用 background-color, 使用 border-top:0.0625rem solid #979797; 效果是一样的*/
          transform: scaleY(0.5);
        }
        .name {
          font-size: 0.875rem;
          color: #00001C;
          width:30%;
          text-align: left;

        }
        .service-flex {
            flex:1;
        }
        .input {
          color: #00001C;
          font-size: 0.8125rem;
          border: none;

          &::-webkit-input-placeholder {
            color: #AAAAB3;
            font-size: 0.8125rem;
          }
        }
        .icon-icon_more1 {
          color:#AAAAB3;
          font-size: 0.875rem;
        }

        .textarea {
          border: none;
          font-size: 14px;
          width: 332.496px;
          line-height: 24px;
          letter-spacing: 0.704px;
          color: #878787;
        }
      }
      .desc {
        flex:1;
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: column;
      }
      .item-desc {
        width:100%;
      }
      .service {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        .name {
          padding:0 0 0.75rem 0;
        }
      }

      .images {
        margin-top: 13.008px;
        width:100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(3, 5.157rem);
        grid-column-gap: 1.75rem;
        grid-row-gap: 1.6rem;

        .images-tips{
          position: absolute;
          left: 0;
          right: 0;
          bottom:5px;
          text-align: center;
          font-size: 0.875rem;
          text-wrap: nowrap;
          color: #878787;
        }
        .imgItem {
          width: 6.25rem;
          height: 6.25rem;
          .qrcode {
            width: 6.25rem;
            height: 6.25rem;
            border: 0.0625rem dashed #c0ccda;
            position: relative;
            padding: 3.2px;
            // margin:0 0.625rem 0 0;
            img {
              width: 100%;
              height: 100%;
            }

            .delImg {
              position: absolute;
              border-radius: 50%;
              font-size: 0.5rem;
              width: 1rem;
              height: 1rem;
              right: -0.5rem;
              top: -0.5rem;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #999;
              background-color: #ececec;
            }

            .overdue {
              position: absolute;
              top: 0.2rem;
              left: 0.2rem;
              right: 0.2rem;
              bottom: 0.2rem;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              color: #fff;
              background-color: rgba(0, 0, 0, 0.5);
            }
          }
        }

        .entry {
          margin-top: 6.496px;
          display: flex;
          align-items: center;

          input {
            text-align: center;
            width: 4.156rem;
            height: 1.25rem;
            font-size: 0.75rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0;
            color: #999;
            border: solid 0.031rem #efefef;
          }

          span {
            margin-left: 0.25rem;
            font-size: 0.75rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0;
            color: #666;
          }
        }
      }
    }

    .btn {
      width:calc(100% - 2rem);
      margin:0 auto;
      border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
      cursor: pointer;
      // position: fixed;
      // bottom: 50px;
      left: 0;
      right: 0;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9375rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.9375rem;
      letter-spacing: 0.05rem;
      color: #fff;
      background-color: var(--themeBaseColor);;
      transition: 0.5s;

      &:active {
        background-color: var(--themeBaseColor);
      }
    }
  //新的样式
  .imgflex {
      position: relative;
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-items: center;
      // margin-top: 12px;
      width: 6.25rem;
      height: 6.25rem;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;

      .photoshow {
        width: 6.25rem;
        height: 6.25rem;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        border: 0.0313rem dashed rgb(192, 204, 218);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .crucifix {
        /* 十字架样式 */
        width: 1.5rem;
        height: 0.1875rem;
        background: #b2b2b2;
        border-radius: 0.125rem;
        position: relative;

        &::after {
          content: "";
          width: 1.5rem;
          height: 0.1875rem;
          background: #b2b2b2;
          border-radius: 0.125rem;
          position: absolute;
          transform: rotate(-90deg);
          left: 0;
        }
      }
      img {
        width: 6.25rem;
        height: 6.25rem;
      }
    }
</style>
